<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="./js/ctx.js"></script>
</head>
<body>
<div id="cesiumContainer">
</div>
<div id="toolbar"></div>
<script>
    var initCesium = new InitCesium();
    var viewer = initCesium.initViewer('cesiumContainer',{
        infoBox : false,
        selectionIndicator : false,
        shadows : true,
        shouldAnimate : true
    });

    function createModel(url, height) {
        viewer.entities.removeAll();

        var position = Cesium.Cartesian3.fromDegrees(-123.0744619, 44.0503706, height);
        var heading = Cesium.Math.toRadians(135);
        var pitch = 0;
        var roll = 0;
        var hpr = new Cesium.HeadingPitchRoll(heading, pitch, roll);
        var orientation = Cesium.Transforms.headingPitchRollQuaternion(position, hpr);

        var entity = viewer.entities.add({
            name : url,
            position : position,
            orientation : orientation,
            model : {
                uri : url,
                minimumPixelSize : 128,
                maximumScale : 20000
            }
        });
        viewer.trackedEntity = entity;
    }

    var options = [{
        text : 'Aircraft',
        onselect : function() {
            createModel('../data/models/CesiumAir/Cesium_Air.glb', 5000.0);
        }
    }, {
        text : 'Ground Vehicle',
        onselect : function() {
            createModel('../data/models/GroundVehicle/GroundVehicle.glb', 0);
        }
    }, {
        text : 'Hot Air Balloon',
        onselect : function() {
            createModel('../data/models/CesiumBalloon/CesiumBalloon.glb', 1000.0);
        }
    }, {
        text : 'Milk Truck',
        onselect : function() {
            createModel('../data/models/CesiumMilkTruck/CesiumMilkTruck-kmc.glb', 0);
        }
    }, {
        text : 'Skinned Character',
        onselect : function() {
            createModel('../data/models/CesiumMan/Cesium_Man.glb', 0);
        }
    }, {
        text : 'Draco Compressed Model',
        onselect : function() {
            createModel('../data/models/DracoCompressed/CesiumMilkTruck.gltf', 0);
        }
    }];

    Sandcastle.addToolbarMenu(options);

</script>
</body>
</html>